<template>
  <div class="container">
    <el-row class="card_header" type="flex">
      <div class="org_title">组织列表</div>
    </el-row>
    <div class="card_container" type="flex">
      <div class="card">
        <el-card class="new_org_card">
          <div slot="header" class="header">
            <span>新建组织</span>
          </div>
          <div class="body">
            <el-button class="new_org_button"
                       icon="el-icon-plus"
                       plain
                       @click="dialogFormVisible = !dialogFormVisible"></el-button>
          </div>
        </el-card>
      </div>
      <div class="card" v-for="(item,index) in OrgList" :key="index">
        <orgCard :org="item"></orgCard>
      </div>
    </div>
    <!-- <div class="card_footer">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-sizes="[10, 20, 30, 40]"
          :pager-count="5"
          :page-size="pageSize"
          layout="total, prev, pager, next, sizes"
          :total="total">
      </el-pagination>
    </div> -->
    <el-dialog title="新建组织" :visible.sync="dialogFormVisible" width=30%>
      <el-form ref="form" :model="FormData" label-width="80px">
        <el-form-item label="组织名称">
          <el-input v-model="FormData.name"></el-input>
        </el-form-item>
        <el-form-item label="组织介绍">
          <el-input v-model="FormData.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="newOrg">立即创建</el-button>
          <el-button @click="dialogFormVisible = !dialogFormVisible">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axiosinstance from "@/util/http"
import orgCard  from "@/view/Home/components/Organization/orgCard"
export default {
  name: "Organization",
  computed:{},
  data() {
    return{
      user:null,
      OrgList:[],
      total:10,
      page:1,
      pageSize:10,
      arr:[1,2,3,4],
      formLabelWidth: "100px",
      FormData:{
        name:"",
        description:"",
      },
      dialogFormVisible:false,
    }
  },
  methods:{
    async newOrg(){
      let that = this;
      let res = await axiosinstance.post('/organization/addorganization',{
        name:this.FormData.name,
        description:this.FormData.description,
        username:this.$store.getters.getuser.username
      }).catch(err => console.error(err))
      if(res.data.status === 0){
        this.$message({
          message:res.data.msg,
          type:'success'
        })
        that.FormData.name = "";
        that.FormData.description = "";
        that.dialogFormVisible = !that.dialogFormVisible;
        await this.refreshOrgList();
      }
      else this.$message.error({
        message:res.data.msg
      })
    },
    async refreshOrgList(){
      await axiosinstance.get('/organization/allorganizationlist',{
        params:{
          page:this.page,
          pageSize:this.pageSize,
          // username:this.$store.getters.getuser.username
        }
      }).then(res =>{
        this.OrgList = res.data?.data?.orgs;
        this.total = res.data?.data?.total;
        console.log(res.data)
      } )
    },
    handleSizeChange(e){
      console.log(e)
      this.pageSize = e;
       this.refreshOrgList()
    },
    handleCurrentChange(e){
      this.page = e;
       this.refreshOrgList()
    },

  },
  components:{
    orgCard
  },
  created(){

    this.user = this.$store.getters.getuser;
    console.log(this.user)
    console.log(this.page,this.pageSize)
    axiosinstance.get('/organization/allorganizationlist',{
      params:{
        page:this.page,
        pageSize:this.pageSize,
        // username:this.user.username
      }
    }).then(res =>{
      this.OrgList = res.data?.data?.orgs;
      this.total = res.data?.data?.total;
      console.log(res.data)
    } )
  },

}

</script>

<style scoped lang="less">
  .container{
    height:100%;
    position:relative;
    background-color: #e5e5e5;
    ::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    .card_header{
      font-size:20px;
      font-weight: bold;
      font-color: #123;
      margin: 0 auto;
    }
    .card_container{
      height:100%;
      display:flex;
      flex-wrap: wrap;
      justify-items: center;
      margin: 0 auto;
      padding-left: 180px;
      .card{
        width:20%;
        //height:80%;
        margin:1%;
        .new_org_card{
          height:100%;
          border:2px solid rgb(255, 255, 255);
          border-radius:35px;
          transition-delay: 0.04s;
          transition-duration:0.7s;
          &:hover{
            transform: translate(0,-5px);
            border-radius:15px;
            transition-delay: 0.13s;
            transition-duration:0.7s;
          }
          .header{
          }
          .body{
            .new_org_button{
              //background:green;
              margin:0;
              padding:0;
              border: 0px;
              border-radius:50%;
              font-size:80px;
              vertical-align:middle;
              &:hover{

              }
            }
          }
        }
      }
    }
  }

  .org_title{
    margin: 20px auto;
  }
</style>